<!--
 * @Author: panda
 * @Date: 2022-05-18 12:26
 * @Description: 历史视图
-->
<template>
  <div>
    <el-row id="h-row">
      <el-col :span="4" />
      <el-col :span="16">
        <div class="common-layout" v-infinite-scroll="load" :style=" {height: `${pageHeight}px`}">
          <el-container>
            <el-header style="padding-top: 30px">
              <el-space>
                <el-icon size="35px">
                  <component :is="Clock" />
                </el-icon>
                <span style="font-size: 20px">历史记录</span>
              </el-space>
              <el-space :size="15" style="float:right;">
                <el-input
                  v-model="input1"
                  class="w-50 m-2"
                  size="large"
                  placeholder="Please Input"
                  :suffix-icon="Search"
                />
                <el-button plain size="large">暂停历史记录</el-button>
                <el-button plain size="large">清空历史记录</el-button>
              </el-space>
            </el-header>
            <el-main>
              <el-timeline>
                <el-timeline-item
                  v-for="h in histories" :key="h.id" :timestamp="h.timestamp"
                  placement="top">
                  <el-card style="border: none; " shadow="hover">
                    <el-container>
                      <el-aside style="width: 192px;">
                        <el-image
                          :src="h.thumbnail" fit="cover" lazy
                          style="width: 192px;height: 120px;" />
                      </el-aside>
                      <el-main style="padding: 0 0 0 20px">
                        <div style="height:100%;position: relative">
                          <el-button type="text">{{ h.title }}</el-button>
                          <el-button style="float: right" :icon="Delete" circle />
                          <div style="width: 100%;position:absolute;bottom: 0;">
                            <span>看到 {{ h.remainTime }}</span>
                            <div style="width: 80%;float:right;">
                              <span style="width: 60%;display:flex;justify-content: center">
                                {{ h.author }}
                              </span>
                            </div>
                            <el-divider style="margin:0;width: 100%" />
                          </div>
                        </div>
                      </el-main>
                    </el-container>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-main>
          </el-container>
        </div>
      </el-col>
      <el-col :span="4" />
    </el-row>

  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue'
import {Clock, Delete, Search} from '@element-plus/icons-vue'
import {InitHistoryList} from '@/api/model/history'
import {historyApi} from '@/api/history'

// TODO 效果未完成
export default defineComponent({
  name: 'HistoryView',
  setup() {
    const input1 = ref('')
    let pageNum = 1
    let pageSize = 10
    const pageHeight = ref(0)
    // 组件历史列表以及当前分页属性
    const history = reactive(new InitHistoryList())

    const load = () => {
      pageNum += 1
      pageSize = 2
      historyApi.historyList({pageNum, pageSize}).then(res => {
        const {data}=res.data
        data.forEach(function (key: any) {
          history.histories.push(key)
        })
      })
    }

    const debounce = (func: any, time: number, immediate = false) => {
      let timer: number | null = null
      return (...args: any) => {
        if (timer) clearInterval(timer)
        if (immediate) {
          if (!timer) func.apply(this, args)
          timer = window.setTimeout(() => {
            timer = null
          }, time)
        } else {
          timer = window.setTimeout(() => {
            func.apply(this, args)
          }, time)
        }
      }
    }
    

    // 记录当前文章组件的分类信息, 文章页面左侧菜单列表
    onMounted(() => {
      historyApi.historyList({pageNum, pageSize}).then(res => {
        const {data} = res.data
        history.histories = data
      }).catch(err => {
        console.log(err)
      })
      pageHeight.value = document.documentElement.offsetHeight // 获取浏览器可视区域高度
      window.onresize = debounce(() => {
        pageHeight.value = document.documentElement.offsetHeight // 获取浏览器可视区域高度
      }, 200)
    })

    return {
      Search, Clock, Delete, input1, pageHeight, load, ...toRefs(history)
    }
  }
})
</script>

<style scoped>
</style>
